<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <detail-header
        :status="checkState === '审核通过' ? 2 : 3"
        :infoList="infoList"
      ></detail-header>
      <div class="companyInfoBox">
        <el-row class="secondaryTitle secondaryTitleTheme"> 申请信息 </el-row>
        <el-row class="itemInfo">
          <el-row class="detailInfoItemSty">
            <el-col :span="12" class="labelWidthSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >单位名称：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                companyInfo.name || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >统一社会信用代码：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                companyInfo.uscc || '--'
              }}</span>
            </el-col>
          </el-row>
          <el-row class="detailInfoItemSty">
            <el-col :span="12" class="labelWidthSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >注册登记地区：</span
              >
              <span
                v-if="companyInfo.belong == '外地企业'"
                class="gridContent contentSty color666 fontSizeF"
                >{{ companyInfo.regProvinceName }}-{{
                  companyInfo.regCityName
                }}</span
              >
              <span v-else class="gridContent contentSty color666 fontSizeF"
                >{{ companyInfo.regCityName }}-{{
                  companyInfo.regCountyName
                }}</span
              >
            </el-col>
            <el-col :span="12" class="labelWidthSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >经营地区：</span
              >
              <span class="gridContent contentSty color666 fontSizeF"
                >{{ companyInfo.bizCityName }}-{{
                  companyInfo.bizCountyName
                }}</span
              >
            </el-col>
          </el-row>
          <el-row class="detailInfoItemSty">
            <el-col :span="12" class="labelWidthSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >所属行业：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                companyInfo.industry || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >密保手机号：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                companyInfo.tel || '--'
              }}</span>
            </el-col>
          </el-row>
          <el-row class="detailInfoItemSty">
            <el-col :span="12" class="labelWidthSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >单位类型：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                departmentTypeFun || '--'
              }}</span>
            </el-col>
            <el-col
              :span="12"
              class="labelWidthSty"
              v-if="companyInfo.departmentType == '0'"
            >
              <span class="gridContent color333 fontSizeF fontWeight"
                >企业类型：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                companyInfo.companyType || '--'
              }}</span>
            </el-col>
          </el-row>
        </el-row>
      </div>
      <div class="spacing"></div>
      <div class="applyInfoBox">
        <el-row class="secondaryTitle secondaryTitleTheme"> 认证资料 </el-row>
        <el-row class="imgBoxs clearfix">
          <div class="itemBox">
            <div class="imgBox licenseBox">
              <el-image
                style="width: 125.3px; height: 177px"
                :src="companyInfo.licenseImg"
                :preview-src-list="licenseList"
              >
              </el-image>
            </div>
            <span
              v-if="
                this.companyInfo.departmentType == '0' ||
                this.companyInfo.departmentType == '15'
              "
              >营业执照</span
            >
            <span v-else>单位登记证书</span>
          </div>
          <div
            class="itemBox"
            v-if="
              this.companyInfo.departmentType == '0' ||
              this.companyInfo.departmentType == '15'
            "
          >
            <div class="imgBox idcardBox">
              <el-image
                style="width: 172.4px; height: 107px"
                :src="companyInfo.idcardFront"
                :preview-src-list="idcardList1"
              >
              </el-image>
            </div>
            <span v-if="this.companyInfo.departmentType == '0'"
              >法人身份证正面</span
            >
            <span v-if="this.companyInfo.departmentType == '15'"
              >经营者身份证正面</span
            >
          </div>
          <div
            class="itemBox"
            v-if="
              this.companyInfo.departmentType == '0' ||
              this.companyInfo.departmentType == '15'
            "
          >
            <div class="imgBox idcardBox">
              <el-image
                style="width: 172.4px; height: 107px"
                :src="companyInfo.idcardBack"
                :preview-src-list="idcardList2"
              >
              </el-image>
            </div>
            <span v-if="this.companyInfo.departmentType == '0'"
              >法人身份证反面</span
            >
            <span v-if="this.companyInfo.departmentType == '15'"
              >经营者身份证反面</span
            >
          </div>
        </el-row>
      </div>
      <!-- <div class="alignCenter">
            <el-button size="medium" class="backBtn" style="margin-top:0" @click="goBack
            ">返回</el-button>
        </div> -->
    </div>
  </div>
</template>

<script>
import detailHeader from '../publicCom/detailHeader.vue'
export default {
  name: 'checkDetailPage',
  components: { detailHeader },
  data() {
    return {
      titleText: '单位审核详情页',
      id: '', //列表id
      checkState: '', //审核状态
      checktor: '', //审核人
      checkTime: '', //审核时间
      companyAccount: '', //企业账号
      rejectReason: '', //不通过原因
      companyInfo: {
        name: '', //企业名称
        uscc: '', //uscc
        belong: '', //归属
        scale: '',
        industry: '',
        tel: '',
        regAdrress: '',
        manageAdrress: '',
        licenseImg: '',
        idcardFront: '',
        idcardBack: '',
        departmentType: '', //单位类型 0：企业单位;5：事业单位;10：其他
        isChecked: '', //是否经过新华信用校验 1：已通过校验;0：未通过校验
        isCredible: '', //是否真实准确 1：真实准确;0：不真实准确
        bizCityName: '',
        bizCountyName: '',
        regCityName: '',
        regCountyName: '',
        regProvinceName: '',
      },
      licenseImg: '',
      idcardFront: '',
      idcardBack: '',
      licenseList: [],
      idcardList1: [],
      idcardList2: [],
      back: true,
      pageInfo: '',
    }
  },
  computed: {
    departmentTypeFun() {
      if (this.companyInfo.departmentType == '0') {
        return '企业'
      } else if (this.companyInfo.departmentType == '5') {
        return '事业单位'
      } else if (this.companyInfo.departmentType == '10') {
        return '其他'
      } else if (this.companyInfo.departmentType == '15') {
        return '个体工商户'
      }
    },
    infoList() {
      let list = [
        { title: '审核人', value: this.checktor },
        { title: '审核时间', value: this.checkTime },
        { title: '单位账号', value: this.companyAccount },
      ]
      if (this.checkState === '审核不通过') {
        list = [{ title: '不通过原因', value: this.rejectReason }]
      }
      return list
    },
  },
  created() {
    //加载loading
    //this.openFullScreen();

    this.id = this.$route.query.id
    this.pageInfo = this.$route.query.pageInfo

    //获取企业详情
    this.getCompanyDetail()

    $('body').on('click', '.el-image-viewer__canvas', function () {
      $('.el-icon-circle-close').click()
    })
  },
  methods: {
    //开启loading
    openFullScreen() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      return loading
    },
    closeFullScreen(loading) {
      loading.close()
    },
    getCompanyDetail() {
      var vm = this
      vm.axios({
        method: 'post',
        url: 'api-c/companyaudit/expand/companyauditdetail',
        data: {
          id: vm.id,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            const result = res.data.result
            vm.checkState = result.status
            vm.checktor = result.updaterName
            vm.companyAccount = result.remark
            vm.checkTime = result.updateTime
            vm.rejectReason = result.reason
            vm.companyInfo.name = result.name
            vm.companyInfo.uscc = result.uscc
            vm.companyInfo.belong = result.belongs
            vm.companyInfo.scale = result.scale
            vm.companyInfo.industry = result.industryName
            vm.companyInfo.tel = result.tel
            vm.companyInfo.regAdrress = result.regAreaName
            vm.companyInfo.manageAdrress = result.bizAreaName
            vm.companyInfo.departmentType = result.departmentType + ''
            vm.companyInfo.isChecked = result.isChecked
            vm.companyInfo.isCredible = result.isCredible
            vm.companyInfo.bizCityName = result.bizCityName
            vm.companyInfo.bizCountyName = result.bizCountyName
            vm.companyInfo.regCityName = result.regCityName
            vm.companyInfo.regCountyName = result.regCountyName
            vm.companyInfo.companyType = result.companyType
            vm.companyInfo.regProvinceName = result.regProvinceName
            var imgLength = result.fileVOs.length
            if (imgLength > 0) {
              this.companyInfo.licenseImg = result.fileVOs[0].absolutePath
              this.licenseList.push(result.fileVOs[0].absolutePath)
              this.companyInfo.idcardFront = result.fileVOs[1].absolutePath
              this.idcardList1.push(result.fileVOs[1].absolutePath)
              this.companyInfo.idcardBack = result.fileVOs[2].absolutePath
              this.idcardList2.push(result.fileVOs[2].absolutePath)
            }
          } else {
            this.$message({
              message: '数据请求失败',
              type: 'error',
            })
          }
          //请求成功关闭；
          //this.closeFullScreen(this.openFullScreen());
        })
        .catch((error) => {
          this.$message({
            message: '页面数据请求失败',
            type: 'error',
          })
          //请求成功关闭；
          //this.closeFullScreen(this.openFullScreen());
        })
    },
    //返回
    goBack() {
      this.$router.push('/home/enterpriseSet/employerAuditList')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/enterpriseSet/employerAuditList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .mainCon {
    padding: 0;
    height: calc(100% - 67px);
    .itemTitle {
      font-size: 18px;
      // border-bottom: 1px solid #DEE5F4;
      line-height: 50px;
    }
    .wrapBox {
    }
    .checkResultBox {
      padding: 24px;
      background: #f5f7fa;
      // margin:0 24px;
      i {
        vertical-align: middle;
        font-size: 36px;
      }
      .resultInfo {
        display: inline-block;
        margin-left: 15px;
        .resultTop {
          color: #333;
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 8px;
        }
        .resultBottom {
          color: #666;
          span {
            margin-right: 20px;
            font-size: 14px;
          }
        }
      }
      .companyInfo {
        margin-top: 40px;
      }
    }
    .companyInfoBox {
      // margin-top:25px;
      padding: 20px 24px 40px;
      // .itemInfo{
      //     font-size: 14px;
      //     .el-col{
      //         margin-top: 18px;
      //         label{
      //             width: 126px;
      //             text-align: right;
      //             display: inline-block;
      //             color: #666;
      //         }
      //         span{
      //             color: #151515;
      //         }
      //     }
      // }
    }
    .applyInfoBox {
      // margin-top:25px;
      padding: 24px;
      .yellow {
        color: #f9a243;
      }
      .imgBoxs {
        padding: 24px;
        text-align: center;
        .itemBox {
          font-size: 14px;
          display: inline-block;
          margin-right: 54px;
          .imgBox {
            width: 200px;
            height: 200px;
            background: rgba(222, 229, 244, 0.3);
            margin-bottom: 10px;
            span {
              color: #333;
              font-size: 14px;
            }
          }

          .licenseBox {
            .el-image {
              margin-top: 11.5px;
            }
          }
          .idcardBox {
            .el-image {
              margin-top: 46.5px;
            }
          }
        }
        .itemBox:nth-child(3) {
          margin-right: 0px;
        }
      }
    }
    .backBtn {
      width: 136px;
      margin-top: 20px;
      margin-bottom: 24px;
    }
  }
}

// .title{
//     position: relative;
//     padding-left: 20px;
//     // height: 37px;
//     font-size: 16px;
//     border-bottom: 2px solid #f5f7fa;
//     &::before{
//         position: absolute;
//         content: "";
//         width: 3px;
//         height: 16px;
//         left: 0;
//         top: 13px;
//         background: #265FAA;
//     }
// }
</style>
